
<template>
<view >
		<!-- 自定义导航 -->
		<u-navbar title="首页" 
		title-color="#000000" 
		back-icon-color="#fff" 
		title-size="50" 
		:is-back="false" 
		:is-fixed="isFixed" 
		:background="background">
			<view class="navbar-right" slot="right" v-if="slotRight" @click="goSearch">
					<image style="width:45px;height: 45px;" 
					src="../../static/搜索.png" @click="goSearch"></image>
					
			</view>
		</u-navbar>
		
		<!-- NoticeBar 滚动通知 -->
		<!-- 从右往左，连续 -->
		<u-notice-bar mode="horizontal" :list="list1"></u-notice-bar>

		<!--轮播图 -->
		<view class="lunbo" >
			<u-swiper :list="list" duration=500 border-radius=0></u-swiper>
		</view>
		
		<!-- 推荐，关注，附近 -->
		<!-- tabsSwiper 全屏选项卡 -->
		<view class="container">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<view class="sticky">
					<u-tabs 
					font-size="40"
					name="cate_name" 
					count="cate_count" 
					:list="list2" 
					:is-scroll="false" 
					:current="current" 
					@change="tabsChange"
					>
					</u-tabs>
					<u-line color="#cecece" /> <!-- 分割线 -->
				</view>
			</u-sticky>
		</view>
		<u-gap height="20" bg-color="#ffffff"></u-gap>
		
		<!-- 分类标签选择 -->
		<view v-if="is_fenlei">
			<u-radio-group v-model="value" @change="radioGroupChange">
				<u-radio 
					@change="radioChange" 
					v-for="(item, index) in list3" :key="index" 
					:name="item.val"
					active-color="#ffff00"
					:disabled="item.disabled"
				>
					{{item.txt}}
				</u-radio>
			</u-radio-group>
			<u-line color="#cecece" /> <!-- 分割线 -->
		</view>
		
		
		<!-- 博客展示 -->
	
		<view v-for="(item,index) in user" :key="item.id">
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 头像 昵称 属地 关注 -->
			<view class="class01" >
				<view class="touxiang" @click="goSelfInfo(item)">
					<view class="u-m-r-10">
						<u-avatar :src=item.userImg size="140"></u-avatar>
					</view>
				</view>
				
				<view class="nichengIP" @click="goSelfInfo(item)">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{item.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{item.city}}</view>
					</view>
				</view>
				
			</view>
			<!-- 头像，博客主体之间的分割线 -->	
			<u-line color="#d5d5d5" /> 
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke" @click="goBoke(item)">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText">{{item.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text class="text">{{item.content}}</text>
					</view>
				</view>
				<image :src=item.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" /> 
			<u-gap height="10" bg-color="#e1e1e1"></u-gap>
			<u-line color="#d5d5d5" />
		</view>
		
	
		
		<!-- 返回顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		
		<!-- 底部分割线 -->
		<u-divider>没有更多了</u-divider>
		
</view>
</template>

<script>
	export default {
		data() {
			return {
				dianzan_src:"../../static/点赞黑.png",  //没点过用黑，点过用红
				is_fenlei:false,
				TypeId:'1', //博客类型
				myId:"",
				myCity:"",
				user:[			//博客内容
					{
					userId:"",   //用户Id
					blogId:"",   //博客Id
					typeId:"",   //博客类型Id
					title:"", //博客标题
					content:"",         //博客内容
					blogImg:"",        //博客图片地址
					favornum:"",     //点赞数 如果没有点赞则返回null
					collectnum:"",   //收藏数 如果没有收藏则返回null
					commentsnum:"",  //评论数 如果没有评论则返回null
					userName:"",     //用户名
					account:"",      //用户账户名
					password:"",    //用户密码
					phone:"",         //用户电话
					age:"",             //用户年龄
					city:"",         //用户所在城市
					sex:"",           //用户性别
					sign:"",        //用户签名
					userImg:""      //用户头像
					}], 
				
				list3: [ //分类标签列表
						{
							val:'1',
							txt: '美食',
							disabled: false
						},
						{
							val:'2',
							txt: '旅游',
							disabled: false
						},
						{
							val:'3',
							txt: '科技',
							disabled: false
						},
						{
							val:'4',
							txt: '新闻',
							disabled: false
						},
						{
							val:'5',
							txt: '娱乐',
							disabled: false
						}
					],
				value: '1',//分类标签默认值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				scrollTop:1,
				list2: [{
						name: '推荐'
					}, {
						name: '关注'
					}, {
						name: '分类',
					},
					{
						name: '附近',
					}
					],
				list1: [
					'顶部通知'
				],
				//轮播图图片列表
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				
				// 自定义导航栏
				slotRight: true,
				right: false,
				showAction: false,
				rightSlot: false,
				useSlot: false,
				background: {
					//backgroundColor: '#00ff00',
					
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				isBack: true,
				search: false,
				custom: false,
				isFixed: true,
				keyword: '',
				// #ifdef MP
				slotRight: false,
				// #endif
				// #ifndef MP
				slotRight: true,
				// #endif
				//自定义导航栏结束
			}
		},
		onPageScroll(e) {   	//用于回到顶部组件获取位置
			this.scrollTop = e.scrollTop;
		},
		onShow(){  		///获取全局信息
		this.myId=getApp().globalData.globalUserid;
		this.myCity=getApp().globalData.globalUsercity;
		console.log("首页onShow的全局userId:"+getApp().globalData.globalUserid);
		
		console.log("首页onShow的全局city:"+getApp().globalData.globalUsercity);
//------------请求推荐列表博客------------------------
		if(this.current==0){
			console.log('请求推荐列表');
			this.is_fenlei=false;
			
			//网络提交数据
			uni.request({
			url:"http://localhost:9090/showBlog",
			method:"GET",
			data:this.user,
			success:(res)=>{
				console.log(res);
					//成功，code 200,更新博客列表
					if(res.data.code*1==200){
						uni.setStorageSync("user",res.data.result);
						this.user=res.data.result;
					}
					//失败,code  201
					else{
						this.$u.toast("服务器开小差了，重启一下小程序吧");
					}
				}  
			 });
		}
//---------------请求关注列表博客----------------------------------------------------------
		else if(this.current==1){
			console.log('请求关注列表');
			this.is_fenlei=false;
			if(getApp().globalData.globalUserid==0){
				this.$u.toast("还未登录");
				this.user=null;
			}
			else{
				//网络提交数据
				uni.request({
				url:"http://localhost:9090/userFollowBlog?userId="+this.myId,
				method:"GET",
				success:(res)=>{
					console.log(res);
						//成功，code 200,更新博客列表
						if(res.data.code*1==200){
							uni.setStorageSync("user",res.data.result);
							this.user=res.data.result;
						}
						//失败,code  201
						else{
								if(this.myId=null){
									this.$u.toast("还未登录！");
								}
							
								else{
									this.$u.toast("还未关注用户！");
								}
						}
					}  
				 });
				
			}
			
		}
//-------------------请求分类博客结果-----------------------------------------------
		else if(this.current==2){
			console.log('请求分类列表');
			console.log("请求分类："+this.TypeId);
			this.is_fenlei=true;
			//网络提交数据
			uni.request({
			url:"http://localhost:9090/BlogByTypeId?TypeId="+this.TypeId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,更新博客列表
					if(res.data.code*1==200){
						uni.setStorageSync("user",res.data.result);
						this.user=res.data.result;
					}
					//失败,code  201
					else{
							this.$u.toast("出错了");
					}
				}  
			 });
		}
//-------------------请求附近用户博客-----------------------------------------------
		else{
			console.log('请求附近列表');
			this.is_fenlei=false;
			if(getApp().globalData.globalUserid==0){
				this.$u.toast("还未登录");
				this.user=null;
			}
			else{
				console.log(this.myCity);
				//网络提交数据
				uni.request({
				url:"http://localhost:9090/BlogByCity?City="+this.myCity,
				
				method:"GET",
				success:(res)=>{
					console.log(res);
						//成功，code 200,更新博客列表
						if(res.data.code*1==200){
							uni.setStorageSync("user",res.data.result);
							this.user=res.data.result;
		
						}
						//失败,code  201
						else{
								this.$u.toast("出错了");
						}
					}  
				 });
				
			}

		}
		},
		onLoad() {
			// getApp().globalData.baseUrl = 'xxx'
			getApp().globalData.globalUsercity;
			console.log("首页onLoad的全局userId:"+getApp().globalData.globalUserid);
			//打印
			console.log("首页onLoad的全局city:"+getApp().globalData.globalUsercity);
		},
		
		methods: {
//----------------- 选中某个单选框时，由radio时触发--------------------------------------------
			radioChange(e) {
				 console.log(e);
				 this.is_fenlei=true;
				 this.TypeId=e;
				 console.log("请求分类："+this.TypeId);
				 //网络提交数据
				 uni.request({
				 url:"http://localhost:9090/BlogByTypeId?TypeId="+this.TypeId,
				 method:"GET",
				 success:(res)=>{
				 	console.log(res);
				 		//成功，code 200,更新博客列表
				  		if(res.data.code*1==200){
				 			uni.setStorageSync("user",res.data.result);
				 			this.$u.toast("按照分类展示博客");
							this.user=res.data.result;
				  		}
				  		//失败,code  201
				  		else{
				 				this.$u.toast("出错了");
				  		}
				  	}  
				  });
			},
			
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				 console.log(e);
			},
			
//----------------点击放大镜图标，跳转到搜索界面--------------------------------------------
			goSearch(){
				console.log("跳转到搜索页面")
				uni.navigateTo({
					url:"/pages/TRH_pages/Search"
				})
			},
			
			
//-------------点击推荐，关注，附近，类别选项卡-------------------------------------------
			tabsChange(index) {
				console.log(index);
				this.current=index;
				//请求推荐列表博客
				if(this.current==0){
					console.log('请求推荐列表');
					this.is_fenlei=false;
					
					//网络提交数据
					uni.request({
					url:"http://localhost:9090/showBlog",
					method:"GET",
					data:this.user,
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新博客列表
					 		if(res.data.code*1==200){
								uni.setStorageSync("user",res.data.result);
								this.user=res.data.result;
					 		}
					 		//失败,code  201
					 		else{
					 			this.$u.toast("服务器开小差了，重启一下小程序吧");
					 		}
					 	}  
					 });
				}
//---------------请求关注列表博客----------------------------------------------------------
				else if(this.current==1){
					console.log('请求关注列表');
					this.is_fenlei=false;
					if(getApp().globalData.globalUserid==0){
						this.$u.toast("还未登录");
						this.user=null;
					}
					else{
						//网络提交数据
						uni.request({
						url:"http://localhost:9090/userFollowBlog?userId="+this.myId,
						method:"GET",
						success:(res)=>{
							console.log(res);
								//成功，code 200,更新博客列表
						 		if(res.data.code*1==200){
									uni.setStorageSync("user",res.data.result);
									this.user=res.data.result;
						 		}
						 		//失败,code  201
						 		else{
										if(this.myId=null){
											this.$u.toast("还未登录！");
										}
						 			
										else{
											this.$u.toast("还未关注用户！");
										}
						 		}
						 	}  
						 });
						
					}
					
				}
//-------------------请求分类博客结果-----------------------------------------------
				else if(this.current==2){
					console.log('请求分类列表');
					console.log("请求分类："+this.TypeId);
					this.is_fenlei=true;
					//网络提交数据
					uni.request({
					url:"http://localhost:9090/BlogByTypeId?TypeId="+this.TypeId,
					method:"GET",
					success:(res)=>{
						console.log(res);
							//成功，code 200,更新博客列表
					 		if(res.data.code*1==200){
								uni.setStorageSync("user",res.data.result);
								this.user=res.data.result;
					 		}
					 		//失败,code  201
					 		else{
									this.$u.toast("出错了");
					 		}
					 	}  
					 });
				}
//-------------------请求附近用户博客-----------------------------------------------
				else{
					console.log('请求附近列表');
					this.is_fenlei=false;
					if(getApp().globalData.globalUserid==0){
						this.$u.toast("还未登录");
						this.user=null;
					}
					else{
						console.log(this.myCity);
						//网络提交数据
						uni.request({
						url:"http://localhost:9090/BlogByCity?City="+this.myCity,
						
						method:"GET",
						success:(res)=>{
							console.log(res);
								//成功，code 200,更新博客列表
						 		if(res.data.code*1==200){
									uni.setStorageSync("user",res.data.result);
									this.user=res.data.result;
				
						 		}
						 		//失败,code  201
						 		else{
										this.$u.toast("出错了");
						 		}
						 	}  
						 });
						
					}

				}
			},
//-------------点击头像，跳转到个人简介--------------------------------------------
			goSelfInfo(item){
				console.log("跳转到个人简介");
				uni.navigateTo({
					url: '/pages/TRH_pages/Selfinfo?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			},
			goBoke(item){
				console.log("跳转到博客详情");
				uni.navigateTo({
					url: '/pages/TRH_pages/Showboke?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			}
			
		}
	}
</script>



<style scoped lang="scss" >
	@import "@/common/demo.scss";
	.text{
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 7; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; /*溢出隐藏*/
		padding-left: 5% ;
	}

	.class01{				//装头像,昵称,IP,关注
		width:100vw;
		height:150rpx;
		background: #ffffff;
		display:flex;
		flex-direction: row;
		
		.touxiang{			//装头像
			width:20vw;
			height:150rpx;
			background: #ffffff;
			padding-left: 5% ;
		}
	
		.nichengIP{			//装昵称IP
			width:50vw;
			background: #ffffff;
			padding-left: 5% ;
			.nicheng{		//昵称
				width:50vw;
				height:70rpx;
				background: #ffffff;
			}
			.IP{			//IP
				width:50vw;
				height:50rpx;
				background: #ffffff;
			}
		}
		.guanzhu{
			width:30vw;
			background: #ffffff;
		}
		
	}

	.allboke{    			//装博客+博客图片的容器样式 
		width:100vw;
		height:400rpx;
		background: #f1f1f1;
		display: flex;
		flex-direction: row;
		
		
		.boke{				//装博客 标题 容器的样式
			width:60vw;
			height:400rpx;
			background: #2979ff;
			

			.bokeTitle{		//博客标题
				width:60vw;
				height:100rpx;
				background: #ffffff;
				
	
				.titleText{		//博客标题的样式
					font-size: 20px;
					padding-left: 5% ;
				}
			}
			.bokeBody{		//博客主体
				width:60vw;
				height:300rpx;
				background: #ffffff;
	
			}
		}
		.boke_pic{			//博客图片
			width:40vw;
			height:400rpx;
			background: #ffffff;
			display:flex;
		}
	}





	.container { 			//全屏选项卡容器的样式
		background: #2979ff;
		height: 5vh;
		margin-top: 150rpx;
		.tabs{  			//全屏选项卡的样式
			width: 750rpx;
			height: 80rpx;
		}
	}

	.lunbo{
		width:100vw;
		height:100rpx; //轮播图片不同时需要调整
	}
	.sticky {			//吸顶容器的样式
		width: 750rpx;
		height: 80rpx;
		background-color: #000000;
		color: #fff;
		padding: 0rpx;
	}
	.wrap {
		height: 0vh;
	}
	.camera{
		width: 54px;
		height: 44px;
		
		&:active{
			background-color: #ededed;
		}
	}
	.user-box{
		background-color: #fff;
	}
</style>
